<template>
  <div>
    <div class="permissManaToll">
      <el-input size="small" placeholder="请输入角色英文名称..." v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input size="small" placeholder="请输入角色中文名称..." @keydown.enter.native="addRole" v-model="role.namezh"></el-input>
      <el-button size="small" type="primary" @click="addRole">添加角色</el-button>
    </div>
    <div>
      <el-collapse
              v-model="activeName"
              accordion
              style="width: 700px;margin-top: 10px"
              @change="change">
        <el-collapse-item :title="item.namezh" :name="item.id" v-for="(item,index) in roles" :key="index">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>可访问的资源</span>
                <el-button
                        style="float: right; padding: 3px 0;color: #ff000e"
                        type="text"
                        icon="el-icon-delete"
                        @click="deleteRole(item)">
                </el-button>
              </div>
              <el-tree
                      :data="Menus"
                      ref="tree"
                      :key="index"
                      show-checkbox
                      node-key="id"
                      :default-checked-keys="selectedMenus"
                      :props="defaultProps">
              </el-tree>
              <div>
                <el-button size="small" >取消修改</el-button>
                <el-button size="small" type="primary" @click="UpdateRole(item.id,index)" >确认修改</el-button>
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DepMana",
    data() {
      return {
        selectedMenus: [],
        Menus: [],
        roles: [],
        role: {
          name: '',
          namezh: ''
        },
        activeName: '1',
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    methods: {
      // 更新角色权限
      UpdateRole(rid,index){
        // 获取选中的 tree
        let tree = this.$refs.tree[index];
        // 获取选中 tree 返回的数据信息：getCheckedNodes 返回目前被选中的节点所组成的数组
        let selectKey = tree.getCheckedNodes(true);
        let url = '/system/basic/permiss/?rid=' + rid;
        selectKey.forEach(key =>{
          url += '&mids=' + key.id;
        })
        this.putRequest(url).then(resp => {
          if (resp){
            this.activeName = -1;
          }
        })
      },
      // 删除角色
      deleteRole(data){
        this.deleteRequest("/system/basic/permiss/" + data.id).then(resp => {
          if (resp){
            this.initPermiss();
          }
        })
      },
      // 添加角色
      addRole(){
        if (this.role.name && this.role.namezh){
          this.postRequest("/system/basic/permiss/",this.role).then(resp => {
            if (resp){
              this.role = {
                name: '',
                namezh: ''
              };
              this.initPermiss()
            }
          })
        } else {
          this.$message.error("角色名不能为空")
        }
      },
      change(rid){
        this.initMenus();
        this.initSelectMenu(rid);
      },
      initSelectMenu(rid){
        this.getRequest("/system/basic/permiss/mids/" + rid).then(resp => {
          if (resp){
            this.selectedMenus = resp;
          }
        })
      },
      initMenus(){
        this.getRequest("/system/basic/permiss/menus").then(resp => {
          if (resp){
            this.Menus = resp;
          }
        })
      },
      initPermiss() {
        this.getRequest("/system/basic/permiss/").then(resp => {
          if (resp) {
            this.roles = resp;
          }
        })
      }
    },
    mounted() {
      this.initPermiss();
    }
  }
</script>

<style>

  .permissManaToll {
    display: flex;
    justify-content: flex-start;
  }

  .permissManaToll .el-input {
    width: 300px;
    margin-right: 8px;
  }
</style>